<template>
  <div>
    <n-card :bordered="false" class="mt-4 proCard">
      <div class="BasicForm">
        <!-- 渲染 BasicForm 组件 -->
        <BasicForm
          submitButtonText="提交申请"
          layout="horizontal"
          :gridProps="{ cols: 1 }"
          :schemas="schemas"
          @submit="handleSubmit"
          @reset="handleReset"
        >
          <!-- 渲染 statusSlot 插槽 -->
          <template #statusSlot="{ model, field }">
            <n-input v-model:value="model[field]" />
          </template>
        </BasicForm>
      </div>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, reactive } from 'vue';
import { BasicForm, FormSchema } from '@/components/Form/index';
import { useMessage } from 'naive-ui';
import { getCorInfo } from '@/api/dataInfo/flightInfo';
import { applyInfo } from '@/api/table/list'
import { ResultEnum } from '@/enums/httpEnum';

const message = useMessage();
const corOptions = ref([
  {
    label: '点击获取...', // 或者其他的提示信息
    value: null,
  },
]);
const selectedUser = reactive({
    cor: '',
    flightNum: '',
    desk: '',
    startTime: '',
    endTime: '',
    baggage: ''
  });
onMounted(async () => {
  try {
    const response = await getCorInfo();
    corOptions.value = response.data.map((cor) => ({
      label: cor.corCn + ' ' + cor.corEng,
      value: cor.corEng,
    }));
  } catch (error) {
    console.error('Error fetching airline options', error);
    message.error('Failed to fetch airline options');
  }
});


  const schemas: FormSchema[] = [
    {
      field: 'cor',
      component: 'NSelect',
      label: '航空公司',
      rules: [
        { required: true, 
          message: '请选择航空公司',
        }],
      componentProps: {
        placeholder: '请选择航司',
        options: corOptions.value,
        filterable: 'true',
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'flightNum',
      component: 'NInput',
      label: '航班号',
      rules: [
        {
        required: true,
        pattern: /^\d+$/, // 使用正则表达式匹配数字
        message: '请输入有效的航班号（只允许输入数字）',
        trigger: ['blur', 'input'],
        },
      ],
      componentProps: {
        placeholder: '请输入航班号',
        showButton: false,
      },
    },
    {
      field: 'desk',
      component: 'NInput',
      label: '值机柜台',
      componentProps: {
        placeholder: '请输入变更值机柜台号',
        showButton: false,
        onInput: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'startTime',
      component: 'NTimePicker',
      label: '实际起飞时间',
      componentProps: {
        clearable: true,
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'endTime',
      component: 'NTimePicker',
      label: '实际到达时间',
      componentProps: {
        clearable: true,
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'baggage',
      component: 'NInputNumber',
      label: '行李转盘',
      componentProps: {
        placeholder: '请输入行李转盘号',
        onUpdateChecked: (e: any) => {
          console.log(e);
        },
      },
    }
  ];

  watch(corOptions, (newCorOptions) => {
    schemas[0].componentProps.options = newCorOptions;
  });


  async function handleSubmit(values: Recordable) {
    if (!values) {
      return message.error('请填写完整信息');
    }
    selectedUser.baggage = values.baggage;
    selectedUser.cor = values.cor;
    selectedUser.desk = values.desk;
    selectedUser.endTime = values.endTime;
    selectedUser.startTime = values.startTime;
    selectedUser.flightNum = values.flightNum;

    const response = await applyInfo(selectedUser);

    if(response.code == ResultEnum.SUCCESS){
      message.success("申请成功");
    }else{
      message.error("服务繁忙 请稍后再试")
    }

  }

  function handleReset(values: Recordable) {
    console.log(values);
  }
</script>

<style lang="less" scoped>
  .BasicForm {
    width: 550px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 20px;
  }
</style>
